<template>
	<view>
		<uv-notice-bar :text="acts" direction="column"></uv-notice-bar>
		<view class="list">
			<view class="item" @click="itemClick(item)" v-for="item in products" :key="item.shopId">
				<image class="img" :src="item.shopImage"></image>
				<view class="name">{{item.shopName}}</view>
				<view class="price">积分：{{item.shopIntegral}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		getActivity,
		getShangpin
	} from '../../service/modules/personal';
	import {
		storeToRefs
	} from 'pinia'
	import {
		usePersonalStore
	} from '../../store';

	const acts = ref(['1', '2'])
	const products = ref([{
		shopId: 1,
		shopName: 'JavaScript高级程序设计',
		shopImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F54734450%2Fe47b9ad5559d44a7b0ea321550ce5dec.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTQ3MzQ0NTAvZTQ3YjlhZDU1NTlkNDRhN2IwZWEzMjE1NTBjZTVkZWMuanBn%2Fsign%2F50c4e50764523ff6ecfeacbeb7791879.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707161359&t=7b980b4ab4c969b928ec965cc2820815',
		shopIntegral: 900
	}, {
		shopId: 2,
		shopName: '渗透测试',
		shopImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F54734450%2Fe47b9ad5559d44a7b0ea321550ce5dec.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTQ3MzQ0NTAvZTQ3YjlhZDU1NTlkNDRhN2IwZWEzMjE1NTBjZTVkZWMuanBn%2Fsign%2F50c4e50764523ff6ecfeacbeb7791879.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707161359&t=7b980b4ab4c969b928ec965cc2820815',
		shopIntegral: 200
	}, {
		shopId: 3,
		shopName: '渗透测试3',
		shopImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F54734450%2Fe47b9ad5559d44a7b0ea321550ce5dec.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTQ3MzQ0NTAvZTQ3YjlhZDU1NTlkNDRhN2IwZWEzMjE1NTBjZTVkZWMuanBn%2Fsign%2F50c4e50764523ff6ecfeacbeb7791879.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707161359&t=7b980b4ab4c969b928ec965cc2820815',
		shopIntegral: 200
	}, {
		shopId: 4,
		shopName: '渗透测试4',
		shopImage: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F54734450%2Fe47b9ad5559d44a7b0ea321550ce5dec.jpg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNTQ3MzQ0NTAvZTQ3YjlhZDU1NTlkNDRhN2IwZWEzMjE1NTBjZTVkZWMuanBn%2Fsign%2F50c4e50764523ff6ecfeacbeb7791879.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707161359&t=7b980b4ab4c969b928ec965cc2820815',
		shopIntegral: 200
	}])

	const personStore = usePersonalStore()
	const {
		myIntegral,
	} = storeToRefs(personStore)


	onMounted(async () => {
		// 活动列表
		uni.request({
			url: 'https://www.codemy.top/api3/activity/getList?current=1&size=10',
			method: "GET",
			header: {

			},
			success(res) {
				acts.value = res.data.data.records.map(item => item.activityName)
			}
		})
		// 商品列表
		getShangpin().then(res => {
			products.value = res.data
			console.log(res, '商品列表');
		})

	})

	const itemClick = (item) => {
		const {
			userName
		} = uni.getStorageSync('userInfo')
		if (userName) {
			console.log(item.shopName, item.shopIntegral, userName, '兑换商品');
			uni.showModal({
				content: '您确认兑换该电子商品吗?',
				cancelText: '取消',
				confirmText: '确认',
				success: res => {
					// 发请求
					uni.request({
						url: 'http://localhost:3000/exchange/create',
						method: "POST",
						data: {
							"userName": userName,
							"shopIntegral": item.shopIntegral,
							"shopName": item.shopName
						},
						success(res) {
							uni.showModal({
								title: '结果',
								content: res.data.msg + ',成功可添加工作人员QQ:1158382191获取电子书,若有疑问也可以添加QQ反馈',
								cancelText: 'cancel',
								confirmText: 'ok',
								success: res => {},
							});
							// 更新积分
							personStore.getMyIntegralAction()
						}
					})
				},
			});

		}
	}
</script>

<style lang="scss">
	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

		.item {
			width: 48%;
			border-radius: 10rpx;
			margin-bottom: 10rpx;

			.img {
				width: 100%;
				border-radius: 10rpx;
			}

			.name {
				font-size: 34rpx;
				white-space: nowrap;
				/* 不允许文本换行 */

				overflow: hidden;
				/* 当文本溢出时隐藏它 */

				text-overflow: ellipsis;
				/* 使用省略号来展示溢出文本 */
			}

			.price {
				color: #D08E8C;
			}
		}
	}
</style>